<template>
	<div class="Navigation-header">
		<ul class="Navigation-ul">
			<li @click="gotoindex">首页</li>
			<li @click="gotoarticle">文章
				<!-- <ul class="down_bar">
					<li @click="goToHumPage()">人道</li>
					<li @click="goToFrontPage()">前端</li>
					<li @click="goToBackPage()">后端</li>
				</ul> -->
			</li>
			<li @click="gotomessage"> 留言
				<!-- <ul class="down_bar">
					<li>人道</li>
					<li>前端</li>
					<li>后端</li>
				</ul> -->
			</li>
			<!-- <li>友链</li> -->
			<!-- <li>Coco</li> -->
		</ul>
	</div>
	

</template>

<script setup>
	import {
		useRouter
	} from 'vue-router';
	
	const router = useRouter();
	
	function gotoindex(){
		router.push('/');
	}
	function gotoarticle(){
		router.push('/article');
	}
	function gotomessage(){
		router.push('/message');
	}
	// function gotoindex(){
	// 	router.replace('/');
	// }
</script>

<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color:var(--primary-color);
	}
	
	.Navigation-header {
		width: 100%;
		height: 50px;
		/* background-color: #55ff7f; */
		
		.Navigation-ul {
			display: flex;
			position: relative;
			list-style-type: none;
			width: 50%;
			min-width: 550px;
			color: #000;
			/* left: 500px; */
			/* transform: translateX(-50%); */
			/* backdrop-filter: blur(8px); */
			padding: 10px;
			
			li {
				position: relative;
				padding: 3px 10px 3px 10px;
				font-size: 24px;
				line-height: 1;
				transition: 0.2s all linear;
				cursor: pointer;
			}
			
			li::before {
				content: "";
				position: absolute;
			
				left: 100%;
				height: 100%;
				border-bottom: 2px solid var(--primary-color);
				transition: 0.2s all linear;
			}
			
			li:hover::before {
				width: 100%;
				top: 0;
				left: 0;
				transition-delay: 0.1s;
				border-bottom-color: var(--primary-color);
				z-index: -1;
			}
			
			li:hover~li::before {
				left: 0;
			}
			
			li:active {
				background: var(--primary-color);
				color: #fff;
			}
		}
	}
</style>